/**
 * @description 图表入口文件
 */
import { useRef, useState, useEffect } from "react"
import { ErrorBoundary } from 'react-error-boundary'

import Bar from "./Components/Bar"
import Pie from "./Components/Pie"
import Funnel from "./Components/Funnel"
import Funnels from "./Components/Funnels"
import Line from "./Components/Line"
import Lines from "./Components/Lines"
import Gauge from "./Components/Gauge"
import WordCloud from "./Components/WordCloud"
import { Button } from "antd"
// import ChinaMap from './Components/ChinaMap'

let typeMap = {
  '横': Bar,
  '竖': Bar,
  '饼': Pie,
  '饼2': Pie,
  '饼3': Pie,
  '漏': Funnel,
  '漏多1': Funnels,
  '漏多2': Funnels,
  '漏多3': Funnels,
  '漏多4': Funnels,
  '折': Line,
  '折滑': Line,
  '折面': Line,
  '折滑面': Line,
  '折多': Lines,
  '仪': Gauge,
  '词云': WordCloud,
  // '地': ChinaMap,
}

function ChartEntry({ configData, className, chart }) {

  // [1] 确定图表类型
  let { graphType } = configData
  let ChartCom = typeMap[graphType]

  // 盒子装修
  if (!ChartCom) {
    return (
      <div className={className}>
        <div className='chart-box' ></div>
      </div>
    )
  }

  // 图表装修
  return (
    <div className={className}>
      <ErrorBoundary FallbackComponent={ErrorFallback}>
        <ChartCom configData={configData} chart={chart} />
      </ErrorBoundary>
    </div>
  )
}

function ErrorFallback({ error, resetErrorBoundary }) {

  return (
    <>
      <div>出错了，请检查配置项是否合规</div>
      <div>修改错误后，可尝试通过切换到其它图表、再切回来刷新</div>
      <div>或手动刷新 <Button onClick={() => resetErrorBoundary()}>刷新</Button></div>
      <div style={{ color: "red" }}>{error.message}</div>
    </>

  )
}
export default ChartEntry